<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/header.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            background-color: white;
        }

        * {
            box-sizing: border-box;
        }

        input[type=text], select, textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            margin-top: 6px;
            margin-bottom: 16px;
            resize: vertical;
        }

        input[type=submit] {
            background-color: #4CAF50;
            color: white;
            padding: 12px 20px;
            border: none;
            cursor: pointer;
        }

        input[type=submit]:hover {
            background-color: #45a049;
        }

        .container {
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 10px;
        }

        .column {
            float: left;
            width: 50%;
            margin-top: 6px;
            padding: 20px;
        }

        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        @media screen and (max-width: 600px) {
            .column, input[type=submit] {
                width: 100%;
                margin-top: 0;
            }
        }
        img{
            width: 100%;
            height: 300px;
        }
        h3.tittle-w3ls{
            color: #1b1b1b;
            font-size: 2.5em;
            font-weight: 700;
            text-shadow: 0 2px 12px rgb(0 0 05%);
            position: relative;
            left: 600px;
        }
        .pink {
            color: #feac00;
        }
        .Contact{
            width: 1440px;
            margin: 0 auto;
            position: relative;
        }
       .mt-5{
           width: 300px;
           font-family: Andalus;
           text-align: center;
           position: relative;
           left:555px ;
       }
        .i1{
            width: 100%;
            height: 160px;
        }
        #logo{
            color: white;
            position: relative;
            bottom: 145px;
            font-family: Andalus;
            left: 50px;
        }
        a{
            color: white;
            text-decoration: none;
        }
        .a1{
            position: relative;
            left: 700px;
            color: aliceblue;
            font-size: 20px;
            font-weight: 700;
            text-shadow: 0 2px 12px rgb(0 0 05%);
        }

        .c1{
            width: 1440px;
            position: relative;
            margin: 0 auto;
        }
    </style>
</head>

<div id="header">
    <img class="i1" src="../jp/捕获1.PNG" alt="">
    <div id="logo">
        <h1> <a  class="a2"  href="/index.html">A.S Hair Salon
        </a>

        </h1>
    </div>
    <div id="login_reg">
        <a  href="#" @click.prevent="fn1()">退出</a>
    </div>
</div>
<div class="Contact">
    <div>
        <h3 class="tittle-w3ls mb-lg-5 mb-4"><span class="pink">Contact</span> Us</h3>
        <p  class="mt-5 pr-lg-5">Accumsan orci faucibus id eu lorem semper. Eu ac iaculis ac nunc nisi lorem vulputate lorem neque cubilia ac in adipiscing in curae lobortis tortor primis integer massa adipiscing id nisi accumsan pellentesque commodo blandit enim arcu non at amet id arcu magna. Accumsan orci faucibus id eu lorem semper nunc nisi lorem vulputate lorem neque cubilia.</p>
        <img src="456.jpg" alt="">
    </div>
</div>
<script src="https://api.map.baidu.com/api?v=2.0&ak=1a3c89ddb9bcfaf5b9dc4b62e3f2a05b"></script>
<div class="c1">
    <div style="text-align:center">
        <h2>联系我们</h2>
        <p>请填写信息:</p>
    </div>
    <div class="row">
        <div class="column">
            <div id="allmap" style="width:100%;height:500px"></div>
        </div>
        <div class="column">
            <form action="/action_page.php">
                <label for="fname">姓名</label>
                <input type="text" id="fname" name="name" placeholder="您的称呼..">
                <label for="phone">联系电话</label>
                <input type="text" id="phone" name="phone" placeholder="联系电话..">
                <label for="country">测试</label>
                <select id="country" name="country">
                    <option value="bj">北京</option>
                    <option value="sh">上海</option>
                    <option value="sz">深圳</option>
                </select>
                <label for="subject">留言</label>
                <textarea id="subject" name="subject" placeholder="写入一些信息.." style="height:170px"></textarea>
                <input type="submit" value="提交">
            </form>
        </div>
    </div>
</div>
<div id="footer">
    <div class="foot_t">
        <div id="zuo_boby">
            <h2 id="ft_title">A.S Hair Salon</h2>
            <p>Lorem Ipsum is simply text the printing and<br>typesetting standard industry.
                Onec Consequat<br> sapien ut cursus rhoncus. Nullam dui mi,<br> vulputate ac metus.
            </p>
            <h3>Trusted by<span style="color: orange">500+ People</span></h3>
            <img src="微信.webp" alt="" class="tubiao">
            <img src="qq.webp" alt="" class="tubiao">
        </div>
    </div>
    <div class="foot_t">
        <div id="mid_boby">
            <h4>Quick Links</h4>
            <ul>
                <li><a href="" class="lianjie">>>&nbspHome</a></li>
                <li><a href="" class="lianjie">>>&nbspAbout Us</a></li>
                <li><a href="" class="lianjie">>>&nbspSingle Page</a></li>
                <li><a href="" class="lianjie">>>&nbspTeam</a></li>
                <li><a href="" class="lianjie">>>&nbspContact Us</a></li>
            </ul>
        </div>
    </div>
    <div class="foot_t">
        <div id="you_boby">
            <h4>Contact Info</h4>
            <p id="id1">地址:90 nsequursu dsdesdc, xxx Honey Street 049436.Newyork, NY.</p>
            <p id="id2">电话:+1(12) 123 456 789</p>
            <p id="id3">座机:+1(12) 123 456 789</p>
            <p><a href="" class="lianjie">邮箱:123456789@qq.com</a></p>
        </div>
    </div>
</div>
<script>
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));
    map.setCurrentCity("北京");           // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩
</script>
</body>
<script src="../js/header.js"></script>
</html>